<template>
    <div class="login-container">
        <div class="login-box">
            <!-- 网站logo -->
            <div class="logo-box">
                <img src="./imgs/logo.jpg" alt />
            </div>
            <!-- 表单 -->
            <el-form
                ref="form"
                :model="loginForm"
                class="loginForm"
                v-bind:rules="loginFormRules"
            >
                <el-form-item prop="username">
                    <el-input
                        v-model="loginForm.username"
                        placeholder="输入用户名"
                        prefix-icon="el-icon-user-solid"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="loginForm.password"
                        placeholder="输入密码"
                        prefix-icon="el-icon-view"
                        type="password"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="handleLogin"
                        >登录</el-button
                    >
                    <el-button type="info" v-on:click="handleReset"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loginWrap',
    data() {
        return {
            loginForm: {
                username: 'admin',
                password: '123456',
            },
            // 定义验证规则列表
            loginFormRules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur',
                    },
                    {
                        min: 3,
                        max: 6,
                        message: '长度在 3 到 6 个字符',
                        trigger: 'blur',
                    },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 8,
                        message: '长度在 6 到 8 个字符',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        // 登录
        async handleLogin() {
            try {
                await this.$refs.form.validate()
                // 发送登录请求接口
                const res = await this.$http.post('/login', this.loginForm)
                console.log(res)
                // 使用解构赋值获取 res 对象中的 status,msg 数据
                const {
                    meta: { msg, status },
                } = res.data
                // 如果请求成功
                if (status === 200) {
                    // 使用解构赋值获取 res 对象中的 token 数据
                    const {
                        data: { token },
                    } = res.data
                    // 将 token 存到 localStorge 中
                    localStorage.setItem('token', token)
                    // 登录成功提示信息
                    this.$message({
                        message: msg,
                        type: 'success',
                    })
                    // 使用编程式导航方法跳转到首页
                    this.$router.push('/home')
                } else {
                    this.$message({
                        message: msg,
                        type: 'error',
                    })
                }
            } catch (err) {}
        },
        // 重置
        handleReset() {
            this.loginForm.username = ''
            this.loginForm.password = ''
        },
    },
}
</script>

<style lang="less" scoped>
.login-container {
    background-color: #303133;
    height: 100%;
    .login-box {
        width: 450px;
        height: 310px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        .logo-box {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: #fff;
            padding: 5px;
            box-shadow: 0 0 10px #eee;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .loginForm {
            position: absolute;
            top: 120px;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            text-align: center;
        }
    }
}
</style>
